<template>
  <div class="createPost-container">
    <sticky :className="'sub-navbar'" :z-index="$upZindex">


      <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="back">{{$t('table.back')}}
      </el-button>

 

      <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="createData">{{$t('table.submit')}}
      </el-button>

    </sticky>
    <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm" label-position="right" label-width="170px" style='width: 60%; margin-left:10px;margin-top:20px;'>

      <el-form-item label="合同id" prop="id" hidden="true">
        <el-input :disabled="disabled" v-model="postForm.id" placeholder="请输入" style="width: 200px;"></el-input>
      </el-form-item>

      <div class="divide-line">合同信息</div>
      <el-form-item label="合同名称" prop="contractName">
        <el-input :disabled="disabled" v-model="postForm.contractName" placeholder="请输入" style="width: 300px;"></el-input>
      </el-form-item>
      <el-form-item label="合同类型" prop="contractType">
        <el-select v-if="contractTypeSelect" :disabled="disabled" style="width: 200px" class="filter-item" v-model="postForm.contractType" placeholder="请选择">
          <el-option v-for="item in $contractTypeOptions" :key="item.key" :label="item.label" :value="item.key">
          </el-option>
        </el-select>

        <el-input v-else :readonly="'readonly'" :value="postForm.contractType | $contractTypeFilter" placeholder="无" style="width: 200px;"></el-input>

      </el-form-item>

      <el-form-item label="版权引入合同编号" v-if="postForm.contractType==='OUT'" prop="contractInNo">
        <el-autocomplete :disabled="disabled"
          v-model="postForm.contractInNo"
          :fetch-suggestions="queryContractIn"
          @select="handleContractSelect"
          placeholder="请选择版权引入合同编号"
          style="width: 300px;"
        >
        </el-autocomplete>

      </el-form-item>

      <el-form-item label="合同编号" prop="contractNo">
        <el-input :disabled="disabled" v-model="postForm.contractNo" placeholder="请输入" style="width: 300px;"></el-input>
      </el-form-item>



      <el-form-item label="协议有效期(月)" prop="mounthNum">
        <el-input :disabled="disabled" v-model="postForm.mounthNum" placeholder="请输入整数" style="width: 200px;"></el-input>
      </el-form-item>


      <el-form-item label="开始时间" prop="beginDate">
        <el-date-picker :disabled="disabled" v-model="postForm.beginDate" type="date" :picker-options="pickerBeginDateBefore"
@change="changeTime" format="yyyy-MM-dd"  value-format="yyyy-MM-dd" placeholder="请选择日期" style="width: 200px;">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="终止时间" prop="endDate">
        <el-date-picker :disabled="disabled" v-model="postForm.endDate" type="date" :picker-options="pickerBeginDateAfter" format="yyyy-MM-dd"  value-format="yyyy-MM-dd" placeholder="请选择日期" style="width: 200px;">
        </el-date-picker>
      </el-form-item>


      <el-form-item label="签约方数量" prop="contractNum">
        <el-select v-if="opt!='info'" :disabled="disabled" style="width: 200px" class="filter-item" v-model="postForm.contractNum" placeholder="请选择" @change="clearNum">
          <el-option v-for="item in $contractNumOptions" :key="item.key" :label="item.label" :value="item.key">
          </el-option>
        </el-select>
        <el-input v-if="opt==='info'" :disabled="disabled" :value="postForm.contractNum | $partyFilter" placeholder="无" style="width: 200px;"></el-input>
      </el-form-item>


      <el-form-item label="甲方" prop="partyOne">
        <el-input :disabled="disabled" v-model="postForm.partyOne" placeholder="单行输入" style="width: 300px;"></el-input>
      </el-form-item>
      <el-form-item label="乙方" prop="partyTwo">
        <el-input :disabled="disabled"  v-model="postForm.partyTwo" placeholder="单行输入" style="width: 300px;"></el-input>
      </el-form-item>
      <el-form-item label="丙方" v-if="postForm.contractNum=='3'" prop="partyThree">
        <el-input :disabled="disabled" v-model="postForm.partyThree" placeholder="单行输入" style="width: 300px;"></el-input>
      </el-form-item>


      <el-form-item label="合作供应商ID" prop="supplyId" hidden="true">
        <el-input :disabled="disabled" v-model="postForm.supplyId" placeholder="请输入" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="合作供应商" prop="supplyName">
        <el-autocomplete v-if="opt!='info'" :disabled="disabled"
          v-model="postForm.supplyName"
          :fetch-suggestions="querySearchAsync"
          @select="handleSelect"
          placeholder="请选择供应商"
          style="width: 200px;"
        >
        </el-autocomplete>

        <el-input v-if="opt==='info'" :disabled="disabled" v-model="postForm.supplyName" placeholder="无" style="width: 200px;"></el-input>
      </el-form-item>



      <div class="divide-line">通讯信息</div>
      <el-form-item label="联系方式" prop="linkMobile">
        <el-input :disabled="disabled" v-model="postForm.linkMobile" placeholder="请输入" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="地址邮编" prop="address">
        <el-input :disabled="disabled" v-model="postForm.address" placeholder="请输入" style="width: 400px;"></el-input>
      </el-form-item>

      <el-form-item label="签约责编" prop="signName">
        <el-input :disabled="disabled" v-model="postForm.signName" placeholder="请输入" style="width: 200px;"></el-input>
      </el-form-item>

      <div class="divide-line">结算信息</div>
      <el-form-item label="营业执照/身份证" prop="certNo">

        <el-input :disabled="disabled" v-model="postForm.certNo" placeholder="请输入" style="width: 200px;" ></el-input>

      </el-form-item>

      <el-form-item label="" prop="appendixAddress">


        <div hidden="true">
          <el-input :disabled="disabled" hidden="true" v-model="postForm.appendixAddress" placeholder="请输入" style="width: 200px;"></el-input>

          <el-input :disabled="disabled" hidden="true" v-model="postForm.appendixFileName" placeholder="请输入" style="width: 200px;"></el-input>

          <el-input :disabled="disabled" hidden="true" v-model="appendixImgSrc" placeholder="请输入" style="width: 200px;"></el-input>
        </div>

        

        <el-upload
          class="avatar-uploader"
          :action="uploadImgUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :disabled="opt==='info'"
          :headers="uploadHeaders"
          :before-upload="beforeAvatarUpload"
          >
          <img v-if="postForm.appendixAddress" :src="appendixImgSrc" class="avatar" @click="large(postForm.appendixAddress, 0)">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

          <div class="avatar-uploader-text">{{postForm.appendixFileName}}</div>
          <div v-if="postForm.appendixAddress" class="avatar-uploader-text"><el-button type="warning" icon="el-icon-download" @click="downloadAppendixFile" circle></el-button></div>

      </el-form-item>

      <!-- 预览 -->
      <cd-img ref="img"
              :imgList="imgList"
              :index="currentIndex"></cd-img>



      <el-form-item label="账户名" prop="accountName">
        <el-input :disabled="disabled" v-model="postForm.accountName" placeholder="请输入" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="开户行" prop="bankName">
        <el-input :disabled="disabled" v-model="postForm.bankName" placeholder="请输入" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="账号" prop="bankNo">
        <el-input :disabled="disabled" v-model="postForm.bankNo" placeholder="请输入" style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="结算形式" prop="balanceType">
        <el-select v-if="opt!='info'" :disabled="disabled" style="width: 200px" class="filter-item" v-model="postForm.balanceType" placeholder="请选择">
          <el-option v-for="item in $balanceTypeAllOptions" :key="item.key" :label="item.label" :value="item.key">
          </el-option>
        </el-select>

        <el-input v-if="opt==='info'" :disabled="disabled" :value="postForm.balanceType | $balanceTypeAllFilter" placeholder="无" style="width: 200px;"></el-input>
      </el-form-item>


      <el-form-item :label="amountLabelMap[postForm.balanceType]" v-if="postForm.balanceType!='DIVIDE'" prop="totalAmount">
        <el-input :disabled="disabled" v-model="postForm.totalAmount" placeholder="请输入数字(单位:元)" style="width: 200px;"></el-input>
      </el-form-item>

      <div v-if="postForm.balanceType!='BUY' && postForm.balanceType!='MixClear'">
        <el-form-item label="甲方比例" prop="partyOneNum">
          <el-input :disabled="disabled" v-model="postForm.partyOneNum" placeholder="请输入数字" style="width: 200px;"></el-input>
        </el-form-item>

        <el-form-item label="乙方比例" prop="partyTwoNum">
          <el-input v-if="postForm.contractNum=='2'" readonly="readonly" v-model="postForm.partyTwoNum" placeholder="请输入数字" style="width: 200px;"></el-input>

          <el-input v-if="postForm.contractNum!='2'" v-model="postForm.partyTwoNum" placeholder="请输入数字" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item v-if="postForm.contractNum=='3'" label="丙方比例" prop="partyThreeNum">
          <el-input readonly="readonly" v-model="postForm.partyThreeNum" placeholder="请输入数字" style="width: 200px;"></el-input>
        </el-form-item>
      </div>


      <el-form-item label="结算说明" prop="balanceRemark">
        <el-input :disabled="disabled" type="textarea" v-model="postForm.balanceRemark" placeholder="请输入" style="width: 400px;" :autosize="{ minRows: 3, maxRows: 5}"></el-input>
      </el-form-item>


    </el-form>

    <div class="divide-line">附件文档</div>


    <div class="appendix_project">
      <el-upload
        :action="uploadImgUrl"
        list-type="picture-card"
        :file-list="fileList"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :before-remove="handleBeforeRemove"
        :on-success="handleAppraisesSuccess"
        :limit="10"
        :on-exceed="handleExceed"
        style="margin-left:150px"
        :disabled="disabled"
        :headers="uploadHeaders"
        :before-upload="beforeAvatarUpload"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>

      <div class="appendix_name_div">
        <span v-for="(appendixProject,index) in postForm.appendixProjects" class="appendix_name" :key="index">
          {{appendixProject.appendixName}}
        </span>
      </div>
    </div>

    <div v-if="opt==='info'">
      <div class="divide-line-long">版权信息</div>
      <CopyrightsList :contractNo="postForm.contractNo"></CopyrightsList>

      <div class="divide-line-long">授权信息</div>
      <ContractRigthsList :contractNo="postForm.contractNo"></ContractRigthsList>


      <div style="margin-bottom: 30px" align="center">
        <el-button type="primary" size="large" @click="handleUpdate">{{$t('table.edit')}}合同</el-button>
        <!--<el-button type="danger" size="large" @click="handleInvalid">{{$t('table.invalid')}}</el-button>-->
      </div>
    </div>

  </div>


</template>


<script>
  import Sticky from '@/components/Sticky' // 粘性header组件
  import { infoSupplyContract, createSupplyContract, updateSupplyContract, fetchSupplyList, checkContractDate, fetchContractList } from '@/api/supplyContract/supplyContract'
  import CopyrightsList from '@/views/components/CopyrightsList'
  import ContractRigthsList from '@/views/components/ContractRigthsList'
  import CdImg from '@/views/components/CdImg'
  import moment from 'moment/moment'

  import excel_img from '@/assets/icon_imgs/excel.png'
  import pdf_img from '@/assets/icon_imgs/pdf.png'
  import ppt_img from '@/assets/icon_imgs/ppt.png'
  import word_img from '@/assets/icon_imgs/word.png'
  import file_img from '@/assets/icon_imgs/file.png'
  import txt_img from '@/assets/icon_imgs/txt.png'
  import store from '@/store'

  const defaultForm = {
    code: ''
  }

  export default {
    name: 'contractdetail',
    components: { Sticky, CopyrightsList, ContractRigthsList, CdImg },
    // components: { Sticky, CopyrightsList },
    data() {
      return {
        postForm: Object.assign({
          balanceType: 'BUY',
          contractNum: '2',
          appendixAddress: '',
          appendixProjects: [{}],
          beginDate: '',
          endDate: '',
          partyOneNum: '',
          partyTwoNum: '',
          partyThreeNum: '',
          supplyId: '',
          supplyName: ''
        }, defaultForm),
        loading: false,
        rules: {
          contractName: [
            { required: true, message: '请填写合同名称', trigger: 'blur' },
            { max: 50, message: '长度超过50个字符', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9\u4e00-\u9fa5]*$/, message: '请填写字母或汉字或数字' }
          ],
          contractType: [{ required: true, message: '请填写合同类型', trigger: 'blur' }],
          contractNo: [
            { required: true, message: '请填写合同编号', trigger: 'blur' },
            { max: 20, message: '长度超过20个字符', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9\u4e00-\u9fa5_-]*$/, message: '请填写字母或汉字或数字或"_","-"' }
          ],
          contractInNo: [{ required: true, message: '请填写版权引入合同编号', trigger: 'change' }],
          mounthNum: [
            { required: true, message: '请填写协议有效期', trigger: 'blur' },
            { max: 10, message: '有效期过长', trigger: 'blur' }
          ],
          beginDate: [{ required: true, message: '请填写开始时间', trigger: 'blur' }],
          endDate: [{ required: true, message: '请填写终止时间', trigger: 'blur' }],
          contractNum: [{ required: true, message: '请填写签约方数量', trigger: 'blur' }],
          supplyId: [{ required: true, message: '请填写合作供应商ID', trigger: 'blur' }],
          supplyName: [{ required: true, message: '请填写合作供应商名称', trigger: 'change' }],
          linkMobile: [
            { required: true, message: '请填写联系方式', trigger: 'blur' },
            { pattern: /^(1[3-9][0-9])\d{8}$/, message: '手机号格式错误', trigger: 'blur' }
          ],
          address: [
            { max: 500, message: '地址过长', trigger: 'blur' }
          ],
          signName: [{ required: true, message: '请填写签约责编', trigger: 'blur' },
            { max: 30, message: '签约责编输入过长', trigger: 'blur' }
          ],
          certNo: [{ required: true, message: '请填写证件号码', trigger: 'blur' },
            { max: 60, message: '证件号码输入过长', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9]*$/, message: '请填写字母或数字' }],
          appendixAddress: [{ required: true, message: '请上传附件', trigger: 'blur' }],
          accountName: [{ required: true, message: '请填写账户名', trigger: 'blur' },
            { max: 60, message: '账户名过长', trigger: 'blur' }
          ],
          bankName: [{ required: true, message: '请填写开户行', trigger: 'blur' },
            { max: 60, message: '开户行输入过长', trigger: 'blur' }
          ],
          bankNo: [
            { required: true, message: '银行账号不能为空', trigger: 'blur' },
            { max: 20, message: '银行账号输入过长', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9]*$/, message: '请填写字母或数字' }
          ],
          balanceType: [{ required: true, message: '请填写结算形式', trigger: 'blur' }],
          totalAmount: [
            { required: true, message: '请填写金额', trigger: 'blur' },
            { max: 15, message: '金额输入过长', trigger: 'blur' }
          ],

          partyOne: [{ required: true, message: '请填写甲方名称', trigger: 'blur' },
            { max: 30, message: '甲方名称过长', trigger: 'blur' }
          ],
          partyOneNum: [{ required: true, message: '请填写甲方比例', trigger: 'blur' },
            { pattern: /^([1-9]?\d)(\.\d{1,2})?$|^100$/, message: '请填写0-100的数字(小数保留2位)', trigger: 'blur' }
          ],
          partyTwo: [{ required: true, message: '请填写乙方名称', trigger: 'blur' },
            { max: 30, message: '乙方名称过长', trigger: 'blur' }
          ],
          partyTwoNum: [{ required: true, message: '请填写乙方比例', trigger: 'blur' },
            { pattern: /^([1-9]?\d)(\.\d{1,2})?$|^100$/, message: '请填写0-100的数字(小数保留2位)', trigger: 'blur' }
          ],
          partyThree: [{ required: true, message: '请填写丙方名称', trigger: 'blur' },
            { max: 30, message: '丙方名称过长', trigger: 'blur' }
          ],
          partyThreeNum: [{ required: true, message: '请填写丙方比例', trigger: 'blur' },
            { pattern: /^([1-9]?\d)(\.\d{1,2})?$|^100$/, message: '请填写0-100的数字(小数保留2位)', trigger: 'blur' }
          ],
          balanceRemark: [{ max: 1000, message: '结算说明过长', trigger: 'blur' }]
        },
        listQuery: {
          compoundSearch: undefined,
          expireStatus: undefined,
          clearMethod: undefined,
          contractType: undefined
        },
        amountLabelMap: {
          BUY: '买断金额',
          PrePayDivide: '预付金额',
          MixClear: '涉及金额',
          DIVIDE: '无金额'
        },
        oldContractInNo: '',
        disabled: false,
        opt: '',
        imageUrl: '',
        imgList: [],
        currentIndex: 0,
        uploadImgUrl: process.env.BASE_API + '/upload/doUploadFile.do',
        dialogImageUrl: '',
        dialogVisible: false,
        // fileList: ["http://pc76aozjb.bkt.clouddn.com/word.png","http://pc76aozjb.bkt.clouddn.com/word.png"]
        fileList: [],
        // 合同类型是否可选
        contractTypeSelect: false,
        // 默认引入合同列表
        contractTable: 'supplyContractInTable',
        pickerBeginDateBefore: {
          disabledDate: (time) => {
            const beginDateVal = this.postForm.beginDate
            if (beginDateVal) {
              return time.getTime() > beginDateVal
            }
          }
        },
        pickerBeginDateAfter: {
          disabledDate: (time) => {
            const beginDateVal = this.postForm.beginDate
            if (beginDateVal) {
              return time.getTime() < beginDateVal
            }
          }
        },
        // 终止时间
        infoEndDate: null,
        appendixImgSrc: '',
        appendixFileType: ''
      }
    },
    computed: {
      contentShortLength() {
        return this.postForm.content_short.length
      },
      mounthNum() {
        return this.postForm.mounthNum
      },
      totalAmount() {
        return this.postForm.totalAmount
      },
      partyOneNum() {
        return this.postForm.partyOneNum
      },
      // partyTwoNum() {
      //   return this.postForm.partyTwoNum
      // },
      // partyThreeNum() {
      //   return this.postForm.partyThreeNum
      // },
      comMounthNum() {
        return this.postForm.mounthNum
      },
      comBeginDate() {
        return this.postForm.beginDate
      },
      uploadHeaders() {
        if (store.getters.token) {
          return {
            'Authorization': store.getters.token
          }
        }
      },
      balanceTotal() {
        const total = Number(this.postForm.partyOneNum) + Number(this.postForm.partyTwoNum) + Number(this.postForm.partyThreeNum)
        // if (total > 100) {
        //   alert(11)
        // }
        return total
      },
      tempSupplyName() {
        if (this.postForm.supplyName) {
          return this.postForm.supplyName
        } else {
          return this.$route.query.supplyName
        }
      }
    },
    created() {
      // 合同类型赋值
      const contractType = this.$route.query.contractType
      if (contractType != null) {
        this.postForm.contractType = contractType
      }
      // 合同类型是否可选
      if (typeof (this.postForm.id) === 'undefined' && typeof (this.postForm.contractType) === 'undefined') {
        this.contractTypeSelect = true
      }
      if (contractType === 'OUT') {
        this.contractTable = 'supplyContractOutTable'
      }

      const id = this.$route.query.id
      const contractNo = this.$route.query.contractNo

      const supplyId = this.$route.query.supplyId
      const supplyName = this.$route.query.supplyName

      if (id != null || contractNo != null) {
        const params = { 'id': id, 'contractNo': contractNo }
        infoSupplyContract(params).then(response => {
          if (response.success) {
            // 保持终止时间
            this.infoEndDate = response.content.endDate
            this.postForm = Object.assign({}, response.content) // copy obj
            this.postForm.contractNum = this.postForm.contractNum + ''
            // 记录老合同号用于比较
            this.oldContractInNo = this.postForm.contractInNo
            // 判断是否是详情页面
            this.opt = this.$route.query.opt
            if (this.opt === 'info') {
              this.disabled = true
            }
            // 初始化附件图片
            this.initAppendix(response.content.appendixFileName, response.content.appendixAddress)
            // 图片墙
            this.buildPicWall(response.content.appendixProjects)
            this.contractTypeSelect = false
            if (this.postForm.contractType === 'OUT') {
              this.contractTable = 'supplyContractOutTable'
            }
          } else {
            this.postForm.id = null
            this.$message({
              type: 'fail',
              message: response.message
            })
            this.$router.go(-1)
          }
        }).catch((error) => {
          this.postForm.id = null
          console.log(error)
        })
      }

      if (supplyName && supplyId) {
        this.postForm.supplyId = supplyId
        this.postForm.supplyName = supplyName
      }
    },
    filters: {
    },
    methods: {
      submitForm() {},
      createData() {
        this.$refs['postForm'].validate((valid) => {
          if (valid) {
            // 根据是否有id来判断
            if (this.postForm.id != null) {
              updateSupplyContract(this.postForm).then(response => {
                if (response.success) {
                  this.$notify({
                    title: '成功',
                    message: '更新成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.$router.push({ name: this.contractTable })
                } else {
                  this.$message({
                    type: 'fail',
                    message: response.message
                  })
                }
              })
            } else {
              createSupplyContract(this.postForm).then((response) => {
                if (response.success) {
                  this.$notify({
                    title: '成功',
                    message: '创建成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.$router.push({ name: this.contractTable })
                } else {
                  this.$message({
                    type: 'fail',
                    message: response.message
                  })
                }
              })
            }
          }
        })
      },
      querySearchAsync(queryString, callback) {
        var list = [{}]
        // 调用的后台接口
        // let url = 后台接口地址 + queryString;
        // 从后台获取到对象数组
        const params = { 'abbreviation': queryString }
        fetchSupplyList(params).then((response) => {
          if (response.success) {
            // 在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
            for (const i of response.content) {
              // 将名字放入
              Object.assign(i, { 'value': i.abbreviation })
            }
            list = response.content
            callback(list)
          } else {
            this.$message({
              type: 'fail',
              message: response.message
            })
          }
        }).catch((error) => {
          console.log(error)
        })
      },
      // 供应商选择后的回调
      handleSelect(item) {
        // 供应商id
        this.postForm.supplyId = item.supplierId
        this.postForm.supplyName = item.abbreviation
      },
      queryContractIn(queryString, callback) {
        var list = [{}]
        // 调用的后台接口
        // let url = 后台接口地址 + queryString;
        // 从后台获取到对象数组
        const params = { 'contractNo': this.postForm.contractInNo }

        fetchContractList(params).then((response) => {
          if (response.success) {
            // 在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
            for (const i of response.content) {
              // 将名字放入
              Object.assign(i, { 'value': i.contractNo })
            }

            list = response.content

            callback(list)
          } else {
            this.$message({
              type: 'fail',
              message: response.message
            })
          }
        }).catch((error) => {
          console.log(error)
        })
      },
      // 供应商选择后的回调
      handleContractSelect(item) {
        // 校验
        console.info(item)
        this.checkContractDate()
      },
      checkContractDate() {
        if (this.postForm.contractInNo === null || this.postForm.contractInNo === '' || this.postForm.contractInNo === this.oldContractInNo) {
          return
        }
        const params = { 'contractNo': this.postForm.contractInNo }

        checkContractDate(params).then((response) => {
          if (response.success) {
            if (!response.success) {
              this.$message(response.message)
              this.postForm.contractInNo = ''
            }
          } else {
            this.$message({
              type: 'fail',
              message: response.message
            })
            this.postForm.contractInNo = ''
          }
        }).catch((error) => {
          console.log(error)
          this.postForm.contractInNo = ''
        })
      },
      handleUpdate() {
        this.$router.push({ name: 'supplyContractEdit', query: { id: this.postForm.id }})
      },
      // handleInvalid() {
      //   this.$confirm('失效后，该条数据不可操作，确认失效?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then((response) => {
      //     // 调用失效接口
      //     var p = { id: this.postForm.id }
      //     invalidSupplyContract(p).then(response => {
      //       if (response.success) {
      //         this.$message({
      //           type: 'success',
      //           message: '操作成功!'
      //         })
      //         this.$router.push({ name: this.contractTable })
      //       } else {
      //         this.$message({
      //           type: 'fail',
      //           message: response.message
      //         })
      //       }
      //     })
      //   }).catch(() => {
      //     this.$message({
      //       type: 'info',
      //       message: '已取消操作'
      //     })
      //   })
      // },
      // 图片上传相关
      handleAvatarSuccess(response, file) {
        if (response.success) {
          this.appendixImgSrc = response.content
          this.postForm.appendixAddress = response.content
        }

        if (response.success) {
          var fileName = file.name
          var split = fileName.split('.')
          var fileType = split[split.length - 1].toUpperCase()
          // 判断类型展示图片墙
          this.appendixImgSrc = response.content
          // var pic = { name: fileName, url: response.content }
          // var appendixType = 'IMG'
          if (fileType === 'BMP' || fileType === 'JPG' || fileType === 'JPEG' || fileType === 'PNG' || fileType === 'GIF') {
            console.info('')
          } else if (fileType === 'DOC' || fileType === 'DOCX') {
            this.appendixImgSrc = word_img
            // appendixType = 'WORD'
          } else if (fileType === 'PDF') {
            this.appendixImgSrc = pdf_img
            // appendixType = 'PDF'
          } else if (fileType === 'PPT' || fileType === 'PPTX') {
            this.appendixImgSrc = ppt_img
            // appendixType = 'PPT'
          } else if (fileType === 'XLSX' || fileType === 'XLS') {
            this.appendixImgSrc = excel_img
            // appendixType = 'EXCEL'
          } else if (fileType === 'TXT') {
            this.appendixImgSrc = txt_img
            // appendixType = 'TXT'
          } else {
            this.appendixImgSrc = file_img
            // appendixType = 'FILE'
          }
          this.postForm.appendixAddress = response.content
          this.postForm.appendixFileName = fileName
          // this.imageUrl = response.content;
          // this.postForm.appendixAddress = response.content;
          // this.fileList.push(pic)
          // this.dialogImageUrl = pic.url
          // // 附件列表添加
          // var appendixItem = {
          //   appendixType: appendixType,
          //   appendixName: fileName,
          //   appendixAddress: response.content
          // }
          // if (!this.postForm.appendixProjects) {
          //   this.postForm.appendixProjects = [appendixItem]
          // } else {
          //   this.postForm.appendixProjects.push(appendixItem)
          // }
        } else {
          this.$message({
            type: 'fail',
            message: '上传失败!'
          })
        }
      },
      beforeAvatarUpload(file) {
        const mb = file.size / 1024 / 1024
        const sizeFlag = mb < 200
        if (!sizeFlag) {
          this.$message.error('只能上传小于200M的文件')
          return sizeFlag
        }
        if (mb > 100) {
          this.$message({
            type: 'info',
            message: '文件大于100M,正在默默上传,先去喝杯咖啡吧~'
          })
        } else if (mb > 50) {
          this.$message({
            type: 'info',
            message: '文件大于50M,正在默默上传,请先干点其他事情吧'
          })
        } else if (mb > 20) {
          this.$message({
            type: 'info',
            message: '文件大于20M,正在默默上传,请耐心等待'
          })
        }
        // 大小限制

        // const fileType = file.type
        // const flag = /\.*(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileType)
        // if (!flag) {
        //   this.$message.error('图片类型必须是.gif,jpeg,jpg,png中的一种!')
        // } else {
        //   this.postForm.appendixFileName = file.name
        // }
        return sizeFlag
      },
      large(img, index) { // 图片放大
        if (img.length > 0 && this.opt === 'info') {
          this.imgList.push(img)
          this.currentIndex = index
          this.$refs.img.open()
        }
      },
      handleBeforeRemove(file, fileList) {
        this.postForm.appendixProjects.splice(fileList.indexOf(file), 1)
      },
      handleRemove(file, fileList) {
        // fileList.indexOf(file)
        this.fileList = fileList
      },
      handlePictureCardPreview(file) {
        const appendixProject = this.postForm.appendixProjects[this.fileList.indexOf(file)]

        const appendixType = appendixProject.appendixType
        if (appendixType === 'IMG') {
          // this.dialogImageUrl = file.url;
          this.dialogImageUrl = file.url
          this.dialogVisible = true
        } else {
          window.open(appendixProject.appendixAddress)
        }
      },

      handleAppraisesSuccess(response, file) {
        if (response.success) {
          var fileName = file.name
          var split = fileName.split('.')
          var fileType = split[split.length - 1].toUpperCase()
          // 判断类型展示图片墙
          var pic = { name: fileName, url: response.content }
          var appendixType = 'IMG'
          if (fileType === 'BMP' || fileType === 'JPG' || fileType === 'JPEG' || fileType === 'PNG' || fileType === 'GIF') {
            console.info('')
          } else if (fileType === 'DOC' || fileType === 'DOCX') {
            pic.url = word_img
            appendixType = 'WORD'
          } else if (fileType === 'PDF') {
            pic.url = pdf_img
            appendixType = 'PDF'
          } else if (fileType === 'PPT' || fileType === 'PPTX') {
            pic.url = ppt_img
            appendixType = 'PPT'
          } else if (fileType === 'XLSX' || fileType === 'XLS') {
            pic.url = excel_img
            appendixType = 'EXCEL'
          } else if (fileType === 'TXT') {
            pic.url = txt_img
            appendixType = 'TXT'
          } else {
            pic.url = file_img
            appendixType = 'FILE'
          }
          // this.imageUrl = response.content;
          // this.postForm.appendixAddress = response.content;
          this.fileList.push(pic)
          this.dialogImageUrl = pic.url
          // 附件列表添加
          var appendixItem = {
            appendixType: appendixType,
            appendixName: fileName,
            appendixAddress: response.content
          }
          if (!this.postForm.appendixProjects) {
            this.postForm.appendixProjects = [appendixItem]
          } else {
            this.postForm.appendixProjects.push(appendixItem)
          }
        } else {
          this.$message({
            type: 'fail',
            message: '上传失败!'
          })
        }
      },
      initAppendix(appendixFileName, appendixAddress) {
        if (appendixFileName && appendixAddress) {
          const split = appendixFileName.split('.')
          const fileType = split[split.length - 1].toUpperCase()

          if (fileType === 'BMP' || fileType === 'JPG' || fileType === 'JPEG' || fileType === 'PNG' || fileType === 'GIF') {
            this.appendixImgSrc = appendixAddress
            this.appendixFileType = 'IMG'
          } else if (fileType === 'DOC' || fileType === 'DOCX') {
            this.appendixImgSrc = word_img
            this.appendixFileType = 'WORD'
          } else if (fileType === 'PDF') {
            this.appendixImgSrc = pdf_img
            this.appendixFileType = 'PDF'
          } else if (fileType === 'PPT' || fileType === 'PPTX') {
            this.appendixImgSrc = ppt_img
            this.appendixFileType = 'PPT'
          } else if (fileType === 'XLSX' || fileType === 'XLS') {
            this.appendixImgSrc = excel_img
            this.appendixFileType = 'EXCEL'
          } else if (fileType === 'TXT') {
            this.appendixImgSrc = txt_img
            this.appendixFileType = 'TXT'
          } else {
            this.appendixImgSrc = file_img
            this.appendixFileType = 'FILE'
          }
        }
      },
      buildPicWall(appendixProjects) {
        for (const appendix of appendixProjects) {
          // const id = appendix.id
          const appendixName = appendix.appendixName
          const appendixType = appendix.appendixType
          const appendixAddress = appendix.appendixAddress

          var pic = { name: appendixName, url: '' }
          if (appendixType === 'IMG') {
            pic.url = appendixAddress
          } else if (appendixType === 'WORD') {
            pic.url = word_img
          } else if (appendixType === 'PDF') {
            pic.url = pdf_img
          } else if (appendixType === 'PPT') {
            pic.url = ppt_img
          } else if (appendixType === 'EXCEL') {
            pic.url = excel_img
          } else if (appendixType === 'TXT') {
            pic.url = txt_img
          } else {
            pic.url = file_img
          }
          this.fileList.push(pic)
        }
      },
      handleExceed(files, fileList) {
        this.$message.warning('最多允许上传10个附件')
      },
      // 返回
      back() {
        // this.$router.push({ name: this.contractTable })
        history.go(-1)
      },
      // 选择开始时间
      changeTime(date) {
        // this.postForm.endDate = ''
        this.pickerBeginDateAfter = {
          disabledDate(time) { // 开始时间-结束时间
            return (time.getTime() < new Date(date).getTime())
          }
        }
      },
      downloadAppendixFile() {
        window.open(this.postForm.appendixAddress)
      },
      clearNum() {
        this.postForm.partyOneNum = ''
        this.postForm.partyTwoNum = ''
        this.postForm.partyThreeNum = ''
      }
    },
    watch: {
      '$route'(to, from) {
        if (from.name === 'supplyContractInEdit' || from.name === 'supplyContractOutEdit' || from.name === 'supplyContractInfo') {
          this.$router.go(0)
        }
      },
      mounthNum() {
        this.postForm.mounthNum = (this.postForm.mounthNum + '').replace(/\D|^0/g, '')
      },
      totalAmount() {
        this.postForm.totalAmount = (this.postForm.totalAmount + '').match(/\d+(\.\d{0,2})?/) ? (this.postForm.totalAmount + '').match(/\d+(\.\d{0,2})?/)[0] : ''
      },
      // partyOneNum() {
      // this.postForm.partyOneNum = (this.postForm.partyOneNum + '').match(/\d+(\.\d{0,2})?/) ? (this.postForm.partyOneNum + '').match(/\d+(\.\d{0,2})?/)[0] : ''
      // },
      // partyTwoNum() {
      //   this.postForm.partyTwoNum = (this.postForm.partyTwoNum + '').match(/\d+(\.\d{0,2})?/) ? (this.postForm.partyTwoNum + '').match(/\d+(\.\d{0,2})?/)[0] : ''
      // },
      // partyThreeNum() {
      //   if (this.postForm.partyThreeNum) {
      //     this.postForm.partyThreeNum = (this.postForm.partyThreeNum + '').match(/\d+(\.\d{0,2})?/) ? (this.postForm.partyThreeNum + '').match(/\d+(\.\d{0,2})?/)[0] : ''
      //   }
      // },
      comMounthNum() {
        this.postForm.endDate = moment(this.postForm.beginDate).add(this.comMounthNum, 'month').format('YYYY-MM-DD')
      },
      comBeginDate() {
        if (this.infoEndDate) {
          // 初次进入
          this.postForm.endDate = this.infoEndDate
          this.infoEndDate = null
        } else {
          this.postForm.endDate = moment(this.postForm.beginDate).add(this.comMounthNum, 'month').format('YYYY-MM-DD')
        }
      },
      balanceTotal() {
        // if (this.balanceTotal > 100) {
        //   this.$message({
        //     type: 'fail',
        //     message: '比例总和不能大于100'
        //   })
        //   this.postForm.partyTwoNum = 0
        //   this.postForm.partyThreeNum = 0
        // }
        if (this.postForm.contractNum === '2' || this.postForm.contractNum === 2) {
          this.postForm.partyTwoNum = (100 - Number(this.postForm.partyOneNum)).toFixed(2)
          if (this.postForm.partyTwoNum.endsWith('.0') || this.postForm.partyTwoNum.endsWith('.00')) {
            this.postForm.partyTwoNum = Number(this.postForm.partyTwoNum).toFixed(0)
          } else if (this.postForm.partyTwoNum.endsWith('0')) {
            this.postForm.partyTwoNum = Number(this.postForm.partyTwoNum).toFixed(1)
          }
          if (this.postForm.partyTwoNum < 0) {
            this.postForm.partyTwoNum = 0
            this.postForm.partyOneNum = 0
          }
          if (this.postForm.partyTwoNum < 0) {
            this.postForm.partyTwoNum = 0
            this.postForm.partyOneNum = 0
          }
          this.postForm.partyThreeNum = 0
        } else {
          this.postForm.partyThreeNum = (100 - Number(this.postForm.partyOneNum) - Number(this.postForm.partyTwoNum)).toFixed(2)
          if (this.postForm.partyThreeNum.endsWith('.0') || this.postForm.partyThreeNum.endsWith('.00')) {
            this.postForm.partyThreeNum = Number(this.postForm.partyThreeNum).toFixed(0)
          } else if (this.postForm.partyThreeNum.endsWith('0')) {
            this.postForm.partyThreeNum = Number(this.postForm.partyThreeNum).toFixed(1)
          }
          if (this.postForm.partyThreeNum < 0) {
            this.postForm.partyThreeNum = 0
            this.postForm.partyTwoNum = 0
            this.postForm.partyOneNum = 0
          }
        }
      },
      tempSupplyName() {
        if (!this.tempSupplyName) {
          this.postForm.supplyId = ''
        }
      }
    }
  }
</script>

<style scoped>
  /*使用 >>>可以在已经写了scoped的style下控制样式*/
  /*>>>样式穿透，不受scoped限制*/
  .avatar-uploader >>> .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader >>> .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 250px;
    height: 300px;
    line-height: 300px;
    text-align: center;
  }
  .avatar-uploader-text {
    width: 250px;
    text-align: center;
  }

  .avatar {
    width: 250px;
    height: 300px;
    display: block;
  }

  .appendix_project {
    margin-bottom: 50px;
  }
  .appendix_name_div {
    margin-left: 145px;
  }

  .appendix_name {
    width: 146px;
    float: left;
    overflow: hidden;
    margin-left: 8px;
    word-wrap:break-word;
    text-align: center;
  }

  .el-input__inner {
    width: 200px;
  }

</style>


